// Mermaid 图表解析与渲染优化版本
// 这是一个公共文件，包含多个页面共享的功能

// 导入工具函数
import { openDemosPage } from './index.js';
import { debounce, copyCodeToClipboard, ZoomController, CodeHighlightHelper } from './utils/chartUtils.js';
import { TabNavigationManager } from './utils/navigation.js';
import { initMermaid } from './utils/mermaidConfig.js';

// 图表渲染器类 - 封装所有mermaid相关功能
class MermaidRenderer {
  constructor() {
    // 初始化状态
    this.mermaid = null;
    this.isInitialized = false;
    this.previewContainer = null;
    this.renderCache = new Map(); // 添加渲染缓存
    this.errorHandlers = [];
    this.onRenderComplete = null; // 渲染完成回调
    
    // 初始化预览容器
    this.initPreviewContainer();
  }
  
  // 初始化预览容器
  initPreviewContainer() {
    const previewContent = document.getElementById('chart-preview');
    if (previewContent) {
      this.previewContainer = document.createElement('div');
      this.previewContainer.id = 'mermaid-preview';
      previewContent.appendChild(this.previewContainer);
    } else {
      console.error('图表预览容器不存在');
    }
  }
  
  // 等待并初始化mermaid库
  async initialize() {
    // 如果已经初始化，直接返回
    if (this.isInitialized) {
      return Promise.resolve(this.mermaid);
    }
    
    try {
      // 等待mermaid库加载
      this.mermaid = await this.waitForMermaid();
      
      // 使用initMermaid函数进行统一配置
      initMermaid({
        startOnLoad: false,
        securityLevel: 'loose',
        journey: {
          useMaxWidth: true
        },
        renderer: 'svg'
      });
      console.log('Mermaid库使用统一配置初始化成功');
      
      this.isInitialized = true;
      console.log('Mermaid库初始化成功');
      return this.mermaid;
    } catch (error) {
      console.error('Mermaid初始化失败:', error);
      this.handleError('Mermaid库初始化失败: ' + error.message);
      throw error;
    }
  }
  
  // 等待mermaid库完全加载
  waitForMermaid() {
    return new Promise((resolve, reject) => {
      // 设置超时
      const timeoutId = setTimeout(() => {
        reject(new Error('Mermaid库加载超时'));
      }, 10000);
      
      if (window.mermaid) {
        clearTimeout(timeoutId);
        resolve(window.mermaid);
      } else {
        // 使用MutationObserver监测全局对象变化
        const checkMermaid = () => {
          if (window.mermaid) {
            clearTimeout(timeoutId);
            resolve(window.mermaid);
          } else {
            // 继续检查，使用requestAnimationFrame优化性能
            requestAnimationFrame(checkMermaid);
          }
        };
        
        // 开始检查
        requestAnimationFrame(checkMermaid);
      }
    });
  }
  
  // 渲染图表
  async render(code) {
    console.log('开始渲染图表，代码长度:', code.length);
    if (!this.previewContainer) {
      this.initPreviewContainer();
      if (!this.previewContainer) {
        console.log('预览容器不存在');
        return;
      }
    }
    
    // 清空预览容器，重置错误状态
    this.previewContainer.innerHTML = '';
    this.previewContainer.classList.remove('error');
    
    try {
      // 检查缓存
      const cacheKey = this.generateCacheKey(code);
      if (this.renderCache.has(cacheKey)) {
        const cachedResult = this.renderCache.get(cacheKey);
        console.log('使用缓存的渲染结果');
        this.displaySvg(cachedResult.svgCode, cachedResult.bindFunctions);
        return;
      }
      
      // 确保mermaid已初始化
      await this.initialize();
      
      // 验证代码
      if (!this.validateCode(code)) {
        console.log('代码验证失败');
        throw new Error('无效的Mermaid代码');
      }
      
      // 生成唯一ID
      const mermaidContainerId = `mermaid-${Date.now()}`;
      
      // 渲染图表
      console.log('调用mermaid.render方法');
      const renderResult = await this.mermaid.render(mermaidContainerId, code);
      console.log('mermaid.render完成，结果:', renderResult ? '有结果' : '无结果');
      
      // 检查渲染结果
      if (!renderResult || !renderResult.svg) {
        console.log('渲染结果为空');
        throw new Error('渲染结果为空');
      }
      
      // 显示SVG并缓存结果
      console.log('显示SVG');
      this.displaySvg(renderResult.svg, renderResult.bindFunctions);
      this.renderCache.set(cacheKey, {
        svgCode: renderResult.svg,
        bindFunctions: renderResult.bindFunctions
      });
      
      // 限制缓存大小
      this.limitCacheSize(50);
      
      console.log('图表渲染成功');

      
      // 触发渲染完成回调，传递图表类型
      if (typeof this.onRenderComplete === 'function') {
        const chartType = this.getChartType(code);
        this.onRenderComplete(chartType);
      }
      
      // 触发图表渲染完成事件
      const event = new CustomEvent('chartRendered', { 
        detail: { 
          type: 'mermaid',
          chartType: this.getChartType(code),
          timestamp: Date.now()
        } 
      });
      document.dispatchEvent(event);
    } catch (error) {
      console.error('图表渲染失败:', error);
      this.handleError(error.message || '图表渲染失败');
    }
  }
  
  // 验证代码
  validateCode(code) {
    if (!code || typeof code !== 'string' || code.trim().length === 0) {
      return false;
    }
    
    // 基本的图表类型验证 - 包含所有支持的图表类型
    const chartTypeRegex = /\b(flowchart|graph|sequenceDiagram|classDiagram|gantt|pie|stateDiagram|erDiagram|journey|requirements|requirementDiagram|gitGraph|mindmap|timeline|C4Context|C4Container|C4Component|C4Deployment)\b/;
    return chartTypeRegex.test(code);
  }
  
  // 获取图表类型
  getChartType(code) {
    const chartTypeRegex = /\b(flowchart|graph|sequenceDiagram|classDiagram|gantt|pie|stateDiagram|erDiagram|journey|requirements|requirementDiagram|gitGraph|mindmap|timeline|C4Context|C4Container|C4Component|C4Deployment)\b/;
    const match = code.match(chartTypeRegex);
    return match ? match[1] : null;
  }
  
  // 显示SVG
  displaySvg(svgCode, bindFunctions) {
    console.log('开始显示SVG，SVG代码长度:', svgCode.length);
    try {
      // 创建一个新的div容器来存放SVG
      const svgContainer = document.createElement('div');
      svgContainer.className = 'mermaid-svg-container';
      svgContainer.innerHTML = svgCode;
      
      // 修复可能的SVG命名空间问题
      const svgElement = svgContainer.querySelector('svg');
      if (svgElement) {
        console.log('找到SVG元素');
        // 确保SVG命名空间
        if (!svgElement.getAttribute('xmlns')) {
          svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
        }
        
        // 添加响应式样式
        svgElement.setAttribute('style', 'max-width: 100%; height: auto;');
      } else {
        console.log('未找到SVG元素');
      }
      
      // 清空预览容器并添加新的SVG容器
      this.previewContainer.innerHTML = '';
      this.previewContainer.appendChild(svgContainer);
      
      // 执行绑定函数（如果有的话）
      if (typeof bindFunctions === 'function') {
        console.log('执行绑定函数');
        try {
          bindFunctions(svgContainer);
        } catch (bindError) {
          console.warn('绑定交互功能时出错，但不影响图表显示:', bindError);
        }
      }
      
      // 调整SVG大小以确保内容完整显示
      console.log('准备调整SVG大小');
      if (svgElement) {
        this.adjustSvgSize(svgElement);
      } else {
        console.log('没有SVG元素可调整大小');
      }
    } catch (domError) {
      console.error('DOM操作错误:', domError);
      this.handleError('渲染结果处理失败: ' + domError.message);
    }
  }
  
  // 调整SVG大小以确保内容完整显示
  adjustSvgSize(svg) {
    if (!svg) return;
    
    // 获取容器尺寸 - 优先使用chart-preview-container，如果不存在则使用chart-preview
    let container = document.querySelector('.chart-preview-container') || document.getElementById('chart-preview');
    if (!container) return;
    
    // 检查是否是通过ZoomController设置的缩放
    const zoomControllerZoom = svg.getAttribute('data-current-zoom');
    
    // 如果是通过ZoomController设置的缩放，保留该缩放值
    if (zoomControllerZoom) {
      const zoomValue = parseFloat(zoomControllerZoom);
      if (zoomValue > 0.1) {
        // 保持ZoomController设置的缩放值，但不超过1
        const finalScale = Math.min(zoomValue, 1);
        svg.style.transform = `scale(${finalScale})`;
        svg.style.transformOrigin = 'center center';
        return;
      }
    }
    
    // 检查当前是否已经有transform样式（可能是用户手动设置或预定义的缩放值）
    const currentTransform = svg.style.transform;
    const transformMatch = currentTransform.match(/scale\(([^)]+)\)/);
    
    // 如果已经有有效的缩放值（不是极小的值），则保留它，但不超过1
    if (transformMatch) {
      const currentScale = parseFloat(transformMatch[1]);
      // 只有当缩放值非常小时才重新计算
      if (currentScale > 0.1) {
        // 确保缩放值不超过1
        const finalScale = Math.min(currentScale, 1);
        if (finalScale !== currentScale) {
          svg.style.transform = `scale(${finalScale})`;
        }
        return;
      }
    }
    
    // 获取SVG的实际尺寸 - 使用更可靠的方式
    // 先尝试getBBox
    let svgWidth = 0;
    let svgHeight = 0;
    
    try {
      const bbox = svg.getBBox();
      svgWidth = bbox.width || 0;
      svgHeight = bbox.height || 0;
      
      // 如果getBBox返回的尺寸过小，尝试使用viewBox或width/height属性
      if (svgWidth < 10 || svgHeight < 10) {
        // 尝试从viewBox获取尺寸
        const viewBox = svg.getAttribute('viewBox');
        if (viewBox) {
          const viewBoxParts = viewBox.split(/\s+/).filter(part => part.trim() !== '');
          if (viewBoxParts.length >= 4) {
            svgWidth = parseFloat(viewBoxParts[2]) || svgWidth;
            svgHeight = parseFloat(viewBoxParts[3]) || svgHeight;
          }
        }
        
        // 如果仍然过小，尝试从width/height属性获取
        if (svgWidth < 10) {
          const widthAttr = svg.getAttribute('width');
          if (widthAttr) {
            svgWidth = parseFloat(widthAttr.replace(/[^\d.]/g, '')) || svgWidth;
          }
        }
        
        if (svgHeight < 10) {
          const heightAttr = svg.getAttribute('height');
          if (heightAttr) {
            svgHeight = parseFloat(heightAttr.replace(/[^\d.]/g, '')) || svgHeight;
          }
        }
      }
    } catch (e) {
      // 如果getBBox失败，回退到其他方法
      svgWidth = parseFloat(svg.getAttribute('width') || '0');
      svgHeight = parseFloat(svg.getAttribute('height') || '0');
    }
    
    // 根据宽高比分类并适配初始大小
    if (svgWidth > 0 && svgHeight > 0) {
      // 获取容器可用尺寸（减去padding和额外的边距）
      const containerStyle = window.getComputedStyle(container);
      const containerPaddingX = parseFloat(containerStyle.paddingLeft) + parseFloat(containerStyle.paddingRight);
      const containerPaddingY = parseFloat(containerStyle.paddingTop) + parseFloat(containerStyle.paddingBottom);
      
      // 添加额外的内边距（5%），确保图表不会紧贴容器边缘
      const containerWidth = container.clientWidth - containerPaddingX - (container.clientWidth * 0.05);
      const containerHeight = container.clientHeight - containerPaddingY - (container.clientHeight * 0.05);
      
      // 计算宽度和高度的缩放比例
      const widthScale = containerWidth / svgWidth;
      const heightScale = containerHeight / svgHeight;
      
      // 关键改进：无论如何，确保缩放后的图表完全适合容器
      // 取较小的缩放比例，确保SVG完全显示在容器内并保持宽高比
      let scale = Math.min(widthScale, heightScale);
      
      // 添加安全边界，确保即使有误差也不会超出容器
      scale *= 0.95;
      
      // 根据图表类型微调缩放行为
      const chartType = this.getChartTypeFromSvg(svg);
      
      // 对于特殊类型的图表，进一步调整缩放比例
      if (chartType === 'pie' || chartType === 'mindmap') {
        // 对于圆形或辐射状图表，略微缩小一点，避免紧贴边缘
        scale *= 0.9;
      } else if (chartType === 'sequence' || chartType === 'gantt') {
        // 对于水平或垂直长图，确保它们不会超出容器
        scale *= 0.92;
      }
      
      // 确保缩放值不超过1，避免图像过大
      scale = Math.min(scale, 1);
      
      // 应用缩放，但不使用太小的值
      const finalScale = Math.max(scale, 0.2); // 最小缩放值调整为0.2
      
      // 设置SVG样式确保正确居中显示
      svg.style.transform = `scale(${finalScale})`;
      svg.style.transformOrigin = 'center center';
      svg.style.display = 'block';
      svg.style.maxWidth = '100%';
      svg.style.maxHeight = '100%';
      
      // 清除ZoomController的缩放标记
      svg.removeAttribute('data-current-zoom');
    }
  }

  // 从SVG中识别图表类型（辅助方法）
  getChartTypeFromSvg(svg) {
    // 通过检查SVG内容来推断图表类型
    const svgContent = svg.outerHTML.toLowerCase();
    
    if (svgContent.includes('pie') || svgContent.includes('circle')) {
      return 'pie';
    } else if (svgContent.includes('mindmap') || svgContent.includes('node') && svgContent.includes('branch')) {
      return 'mindmap';
    } else if (svgContent.includes('gantt') || svgContent.includes('rect') && svgContent.includes('task')) {
      return 'gantt';
    } else if (svgContent.includes('sequence') || svgContent.includes('actor')) {
      return 'sequence';
    }
    
    return 'default';
  }

  // 处理错误
  handleError(message) {
    // 显示错误消息
    if (this.previewContainer) {
      // 创建更友好的错误显示
      const errorContainer = document.createElement('div');
      errorContainer.className = 'error-message-container';
      
      const errorIcon = document.createElement('div');
      errorIcon.className = 'error-icon';
      errorIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>';
      
      const errorText = document.createElement('div');
      errorText.className = 'error-text';
      errorText.textContent = message;
      
      errorContainer.appendChild(errorIcon);
      errorContainer.appendChild(errorText);
      
      this.previewContainer.innerHTML = '';
      this.previewContainer.appendChild(errorContainer);
      this.previewContainer.classList.add('error');
    }
    
    // 通知所有错误处理器
    this.errorHandlers.forEach(handler => {
      try {
        handler(message);
      } catch (e) {
        console.error('错误处理器执行失败:', e);
      }
    });
  }
  
  // 添加错误处理器
  addErrorHandler(handler) {
    if (typeof handler === 'function') {
      this.errorHandlers.push(handler);
    }
  }
  

  
  // 生成缓存键
  generateCacheKey(code) {
    // 简单的字符串哈希
    let hash = 0;
    for (let i = 0; i < code.length; i++) {
      const char = code.charCodeAt(i);
      hash = ((hash << 5) - hash) + char;
      hash = hash & hash; // 转换为32位整数
    }
    return hash.toString();
  }
  
  // 限制缓存大小
  limitCacheSize(maxSize) {
    while (this.renderCache.size > maxSize) {
      // 删除最老的缓存项
      const firstKey = this.renderCache.keys().next().value;
      this.renderCache.delete(firstKey);
    }
  }
}

// 代码高亮相关功能已移至CodeHighlightHelper类

// 基础语法高亮降级方案
function applyFallbackStyling() {
  const codeDisplay = document.getElementById('code-display');
  if (!codeDisplay) return;
  
  // 设置基础样式
  codeDisplay.style.color = '#111827';
  codeDisplay.style.backgroundColor = '#f8fafc';
  codeDisplay.style.fontFamily = 'Monaco, Menlo, "Ubuntu Mono", monospace';
  codeDisplay.style.fontSize = '14px';
  codeDisplay.style.lineHeight = '1.5';
  
  console.log('应用基础语法高亮降级方案');
}

// 基础语法高亮函数（降级方案）
function applyBasicSyntaxHighlighting(code) {
  // 简单的关键字高亮规则
  const highlightRules = [
    // 图表类型关键字 - 红色显示
    { pattern: /\b(graph|flowchart|sequenceDiagram|gantt|classDiagram|stateDiagram|erDiagram|pie|gitGraph|journey|C4Context|mindmap|timeline|quadrantChart|requirementDiagram)\b/g, className: 'keyword' },
    
    // title, section, subgraph, end, requirement, element等关键字 - 蓝色显示
    { pattern: /\b(title|section|dates|dateFormat|axisFormat|fill|stroke|color|background|fontSize|fontColor|strokeWidth|opacity|strokeDasharray|display|subgraph|end|requirement|element)\b/g, className: 'built_in' },
    
    // 其他关键字
    { pattern: /\b(flowchart|sequence|gantt|class|state|er|pie|git|journey|C4|mindmap|timeline|quadrant|requirement)\b/g, className: 'type' },
    { pattern: /\b(LR|TD|TB|BT|RL)\b/g, className: 'direction' },
    { pattern: /\b(as|participant|actor|note|task|milestone|class|state|entity|relationship|package|container|system|person|boundary|database|queue|file|folder|node|edge)\b/g, className: 'built_in' },
    { pattern: /\b(rect|rounded|diamond|circle|stadium|subroutine|cylinder|rhombus|hexagon|parallelogram|trapezoid|trapezoidAlt)\b/g, className: 'shape' },
    
    // 颜色值
    { pattern: /#[0-9A-Fa-f]{6}/g, className: 'color' },
    { pattern: /\b\d+\b/g, className: 'number' },
    { pattern: /"[^"]*"/g, className: 'string' },
    { pattern: /'[^']*'/g, className: 'string' },
    
    // 注释 - 灰色显示
    { pattern: /\/\/.*$/gm, className: 'comment' },
    { pattern: /%%%.*$/gm, className: 'comment' },
    
    // 操作符
    { pattern: /-->|->|<-|--|==>|==|:::\.\.\./g, className: 'operator' }
  ];
  
  let highlightedCode = code;
  
  // 应用高亮规则
  highlightRules.forEach(rule => {
    highlightedCode = highlightedCode.replace(rule.pattern, 
      `<span class="${rule.className}">$&</span>`);
  });
  
  return highlightedCode;
}

// 初始化代码高亮助手
window.codeHighlightHelper = new CodeHighlightHelper();

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', async function() {
  console.log('DOMContentLoaded事件触发');
  console.log('开始初始化MermaidRenderer，当前页面:', window.location.pathname);
  
  // 创建实例
  const mermaidRenderer = new MermaidRenderer();
  console.log('MermaidRenderer初始化完成', mermaidRenderer);
  // 将实例挂载到window对象上，供其他地方使用
  window.mermaidRenderer = mermaidRenderer;
  
  // 使用工具类中的CodeHighlightHelper替代自定义的CodeHighlighter
  const codeHighlightHelper = new CodeHighlightHelper();
  
  // 初始化demos管理器
  let demosManager = null;
  try {
    if (typeof initializeDemosManager === 'function') {
      await initializeDemosManager();
      demosManager = window.demosManager;
      console.log('Demos管理器初始化成功');
    }
  } catch (error) {
    // 只在demos页面才需要报错，index页面忽略
    if (window.location.pathname.includes('demos.html')) {
      console.error('Demos管理器初始化失败，使用默认模板:', error);
    }
    // 如果demos管理器初始化失败，使用默认的chartTemplates
  }
  
  // 获取预览面板容器和相关元素
  const previewPanel = document.querySelector('.preview-panel');
  const chartPreviewContainer = document.getElementById('chart-preview');
  const previewContentWrapper = document.querySelector('.preview-content-wrapper');
  
  // 获取HTML中已存在的关闭按钮
  const closeBtn = document.getElementById('close-btn');
  if (closeBtn) {
    closeBtn.addEventListener('click', closeFullscreen);
  }
  
  // 进入全屏预览模式（放大居中预览面板）
  function enterFullscreen() {
    if (previewPanel) {
      // 保存原始样式以便恢复
      previewPanel.dataset.originalStyle = previewPanel.getAttribute('style') || '';
      previewPanel.dataset.originalClasses = previewPanel.className;
      
      // 添加fullscreen-active类
      previewPanel.classList.add('fullscreen-active');
      
      // 设置预览面板样式，使其占据屏幕60%的宽高并居中
      previewPanel.style.position = 'fixed';
      previewPanel.style.top = '50%';
      previewPanel.style.left = '50%';
      previewPanel.style.width = '60vw';
      previewPanel.style.height = '60vh';
      previewPanel.style.transform = 'translate(-50%, -50%)';
      previewPanel.style.zIndex = '1000';
      previewPanel.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
      previewPanel.style.borderRadius = '8px';
      previewPanel.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.2)';
      previewPanel.style.display = 'flex';
      previewPanel.style.flexDirection = 'column';
      
      // 防止背景滚动
      document.body.style.overflow = 'hidden';
    }
  }
  
  // 关闭全屏预览模式 - 复原窗口
  function closeFullscreen() {
    if (previewPanel) {
      // 移除fullscreen-active类
      previewPanel.classList.remove('fullscreen-active');
      
      // 恢复原始样式
      previewPanel.setAttribute('style', previewPanel.dataset.originalStyle || '');
      previewPanel.className = previewPanel.dataset.originalClasses || 'preview-panel';
      
      // 恢复背景滚动
      document.body.style.overflow = '';
      
      // 确保内部元素正确显示
      const chartPreview = document.getElementById('chart-preview');
      if (chartPreview) {
        chartPreview.style.transform = '';
        chartPreview.style.width = '';
        chartPreview.style.height = '';
      }
      
      // 重新渲染图表以确保正确显示
      const codeDisplay = document.getElementById('code-display');
      if (codeDisplay && codeDisplay.value) {
        // 重新应用代码高亮
        applyCodeHighlight(codeDisplay.value);
        // 重新渲染图表
        mermaidRenderer.render(codeDisplay.value);
      }
    }
  }
  
  // ESC键关闭全屏预览
  document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape' && previewPanel && previewPanel.style.position === 'fixed') {
        closeFullscreen();
      }
    });
  
  // 监听图表渲染完成事件，根据图表类型设置缩放
  mermaidRenderer.onRenderComplete = function(chartType) {
    // 根据不同图表类型设置合适的缩放值
    const chartZoomLevels = {
      'flowchart': 1,
      'graph': 0.9,
      'sequenceDiagram': 1.2,
      'classDiagram': 1,
      'gantt': 1.1,
      'pie': 0.85,
      'stateDiagram': 0.9,
      'erDiagram': 0.85,
      'journey': 0.9,
      'requirements': 0.8,
      'requirementDiagram': 0.8,
      'gitGraph': 0.9,
      'mindmap': 0.8,
      'timeline': 0.75,
      'C4Context': 0.85,
      'C4Container': 0.85,
      'C4Component': 0.8,
      'C4Deployment': 0.75
    };
    
    // 设置默认缩放值
    let currentZoom = chartZoomLevels[chartType] || 1;
    if (window.zoomController) {
      window.zoomController.setZoomLevel(currentZoom);
    }
    
    // 延迟一点时间再次调整，确保SVG已经完全渲染
    setTimeout(() => {
      const svg = document.querySelector('#mermaid-preview svg');
      if (svg) {
        mermaidRenderer.adjustSvgSize(svg);
      }
      // 通知ZoomController更新缩放
      if (window.zoomController) {
        window.zoomController.updateZoom();
      }
    }, 100);
  };
  
  // 获取DOM元素
  const tabButtons = document.querySelectorAll('.tab-btn');
  const codeDisplay = document.getElementById('code-display');
  const copyButton = document.getElementById('copy-btn');
  const tabsContainer = document.getElementById('tabs-container');
  const leftNavBtn = document.getElementById('left-nav-btn');
  const rightNavBtn = document.getElementById('right-nav-btn');
  
  // 当前激活的图表类型
  let activeChart = 'flow';

  // 防抖处理的渲染函数
  const debouncedRender = debounce((code) => mermaidRenderer.render(code), 300);
  
  // 初始化缩放控制器
   window.zoomController = new ZoomController('preview-panel', 'chart-preview', 'zoom-in-btn', 'zoom-out-btn');
   
  // 初始化标签导航管理器
  window.tabNavManager = new TabNavigationManager('tabs-container', 'left-nav-btn', 'right-nav-btn');
  
  // 应用代码高亮函数
async function applyCodeHighlight(code) {
  try {
    const highlightedCode = await codeHighlightHelper.highlightCode(code);
    // 假设我们有一个高亮容器
    const highlightContainer = document.querySelector('.highlight-container') || codeDisplay.nextElementSibling;
    if (highlightContainer) {
      highlightContainer.innerHTML = highlightedCode;
    }
  } catch (error) {
    console.error('代码高亮失败:', error);
  }
}
  
  // 更新图表显示
  function updateChartDisplay(chartType) {
    let chartCode = '';
    
    // 优先使用demos管理器中的案例
    if (demosManager) {
      const demo = demosManager.getRandomDemo(chartType);
      if (demo) {
        chartCode = demo.code;
        console.log(`使用demos案例: ${demo.title}`);
      } else {
        console.warn(`未找到 ${chartType} 类型的demos案例，使用默认模板`);
      }
    }
    
    // 如果demos管理器不可用或没有找到案例，使用默认模板
    if (!chartCode && chartTemplates[chartType]) {
      chartCode = chartTemplates[chartType].code;
    }
    
    if (!chartCode) {
      console.error('图表类型不存在或没有可用代码:', chartType);
      chartCode = `%% 图表类型: ${chartType}\n%% 请在此处编写您的图表代码`;
    }
    
    // 显示代码
    codeDisplay.value = chartCode;
    
    // 应用代码高亮
    applyCodeHighlight(chartCode);
    
    // 初始渲染
    mermaidRenderer.render(chartCode);
  }
  
  // 切换标签
  function switchTab(chartType) {
    // 更新按钮状态
    tabButtons.forEach(btn => {
      btn.classList.remove('active');
      if (btn.dataset.chart === chartType) {
        btn.classList.add('active');
      }
    });
    
    // 更新当前激活的图表
    activeChart = chartType;
    
    // 更新图表显示
    updateChartDisplay(chartType);
  }
  
  // 设置标签按钮事件监听
  function setupTabButtons() {
    tabButtons.forEach(button => {
      button.addEventListener('click', function() {
        const chartType = this.dataset.chart;
        switchTab(chartType);
      });
    });
  }
  
  // 设置标签导航功能 - 使用TabNavigationManager
  function setupTabNavigation() {
    // 确保TabsNavigationManager已加载
    if (window.tabNavManager) {
      // 调用已初始化的TabNavigationManager实例的方法
      window.tabNavManager.updateNavButtons();
      console.log('使用已初始化的TabNavigationManager');
    } else {
      console.warn('TabNavigationManager未初始化，使用降级方案');
      // 降级方案 - 简单的滚动功能
      const scrollStep = 200;
      
      // 左滚动按钮
      leftNavBtn.addEventListener('click', function() {
        tabsContainer.scrollBy({ left: -scrollStep, behavior: 'smooth' });
      });
      
      // 右滚动按钮
      rightNavBtn.addEventListener('click', function() {
        tabsContainer.scrollBy({ left: scrollStep, behavior: 'smooth' });
      });
    }
  }
  
  // 设置代码编辑区域
  function setupCodeEditor() {
    // 添加输入事件监听，实现实时预览
    codeDisplay.addEventListener('input', function() {
      const code = this.value;
      debouncedRender(code);
      
      // 同时更新高亮
      applyCodeHighlight(code);
    });
    
    // 监听滚动同步 - 直接实现同步逻辑
      codeDisplay.addEventListener('scroll', function() {
        const highlightContainer = document.querySelector('.highlight-container') || codeDisplay.nextElementSibling;
        if (highlightContainer) {
          highlightContainer.scrollTop = codeDisplay.scrollTop;
          highlightContainer.scrollLeft = codeDisplay.scrollLeft;
        }
      });
  }
  
  // 复制代码功能 - 使用工具函数
  function setupCopyButton() {
    if (copyButton && codeDisplay) {
      copyButton.addEventListener('click', () => {
        copyCodeToClipboard(codeDisplay.value, copyButton);
      });
    }
  }
  
  // 编辑按钮功能 - 跳转到editor.html
  function setupEditButton() {
    const editButton = document.getElementById('edit-btn');
    if (editButton) {
      editButton.addEventListener('click', function() {
        // 将当前图表代码作为URL参数传递
        const currentCode = encodeURIComponent(codeDisplay.value);
        const currentChartType = encodeURIComponent(document.querySelector('.tab-btn.active')?.dataset.chart || 'flow');
        // 跳转到editor.html并传递当前代码和图表类型
        window.location.href = `editor.html?code=${currentCode}&chartType=${currentChartType}`;
      });
    }
  }
  

  
  // 初始化
  function initialize() {
    // 设置标签按钮事件
    setupTabButtons();
    
    // 设置复制按钮
    setupCopyButton();
    
    // 设置标签导航功能
    setupTabNavigation();
    
    // 设置代码编辑器
    setupCodeEditor();
    
    // 设置编辑按钮功能
    setupEditButton();
    
    // 背景设置功能已在editor.js中实现
    
    // 初始渲染
    setTimeout(() => {
      updateChartDisplay(activeChart);
    }, 100);
    
    // 使用Promise方式初始化代码高亮
  async function initializeCodeHighlight() {
    try {
      await codeHighlightHelper.ensurePrismLoaded();
      console.log('Prism.js加载成功');
      
      // 初始化代码高亮
      applyCodeHighlight(codeDisplay.value);
    } catch (error) {
      console.error('代码高亮初始化失败:', error);
      // 应用降级样式
      applyFallbackStyling();
    }
  }
  
  // 开始初始化代码高亮
  setTimeout(initializeCodeHighlight, 300);

    console.log('图表平台初始化完成');
  }
  
  // 背景设置功能已在editor.js中实现

  // 执行初始化
  initialize();
  
  // 全局错误处理
  window.onerror = function(message, source, lineno, colno, error) {
    console.error('发生错误:', message);
    return true;
  };
});